<template>
  <all-header :title="$route.meta.title" />
  <div class="detail" v-if="marketGoodsDetial">
    <div class="goods">
      <div class="border">
        <div class="frame">
          <div class="image">
            <img :src="setting.file_url + marketGoodsDetial.photo" />
          </div>
        </div>
      </div>
    </div>

    <div class="text">
      <div class="classlist">
        <div class="name">
          {{ marketGoodsDetial.name }}
        </div>
        <div class="class">{{ marketGoodsDetial.album }}</div>
      </div>
      <div class="price">
        售价:
        <span style="font-weight: bold; font-size: 0.3462rem"
          >￥{{ marketGoodsDetial.price }}</span
        >
      </div>
      <div class="issuuser">
        <div>
          <span>发行方:</span>
          <img :src="setting.file_url + marketGoodsDetial.avatar" alt="" />
          <span style="font-weight: bold; font-size: 0.2692rem">{{
            marketGoodsDetial.username
          }}</span>
        </div>
      </div>
      <div class="remark">
        <text> </text>
      </div>
    </div>

    <div class="auth_mes">
      <div class="titl">认证信息</div>
      <div class="addrass public">
        <div class="name">合约地址:</div>
        <div class="ad_text">{{ fun.addr(setting.contract) }}</div>
        <div class="copy">
          <img src="../../assets/image/goods/copy.png" />
        </div>
      </div>

      <div class="chain public">
        <div class="name">链上标识:</div>
        <div class="ch_text">
          {{ fun.addr(marketGoodsDetial.token, "detail") }}
        </div>
        <div class="copy">
          <img src="../../assets/image/goods/copy.png" />
        </div>
      </div>
    </div>

    <div class="goodsmes auth_mes">
      <div class="title">
        <img src="../../assets/image/goods/introduce.png" />
        <span>作品简介:</span>
      </div>

      <text v-if="marketGoodsDetial.content.length < 1">
        道可道，非常道；名可名，非常名。 无名，天地之始，有名，万物之母。
        故常无欲，以观其妙，常有欲，以观其徼。
        此两者，同出而异名，同谓之玄，<span style="font-weight: bold"
          >玄之又玄，众妙之门。</span
        >
      </text>
      <text v-else>
        {{ goodsDetails.content }}
      </text>
    </div>

    <div class="buy">
      <all-btn :title="btnText" @click="goPay" />
    </div>

    <all-pay :show="payShow" @close="closePay" :price="marketGoodsDetial.price" type="market" :order_id="orderID" />
  </div>
</template>

<script setup>
import { ref } from "@vue/reactivity";
import { Toast } from "vant";
import { computed } from "vue";
import marketStore from "../../store/market";
import { useRoute } from "vue-router";
import commonStore from "../../store/common";
import fun from "../../assets/fun";

const common = commonStore();
const setting = computed(() => common.setting);

const route = useRoute();
const id = route.params.id;

const market = marketStore();
const marketGoodsDetial = ref("");
const getMarketGoodsDetail = () => {
  Toast.loading("加载中...");
  market.getMarketGoodsDetail({ id: id }).then((result) => {
    marketGoodsDetial.value = result;
    console.log(result);
    Toast.clear();
  });
};

// 购买商品
const token = computed(() => common.token);
const userInfo = computed(() => common.userInfo);
let orderID = ref('')
let payShow = ref(false);
let btnText = computed(() => {
  if (marketGoodsDetial.value.status == 4) {
    return "立即购买";
  } else {
    return "去市场看看";
  }
});
const goPay = () => {
  if (marketGoodsDetial.value.market_status != 4) {
    return Toast.fail("暂不能购买");
  }
  if (!token.value) {
    return Toast.fail("请先登录");
  }
  if (!userInfo.value.auth) {
    return Toast.fail("请先实名认证");
  }
  if (!userInfo.value.pay_password) {
    return Toast.fail("请先设置支付密码");
  }
  Toast.loading('加载中...')
  common.pay({ 
    id: id,
    type: "market", 
    no: marketGoodsDetial.value.no 
  }).then(res => { 
    orderID.value = res.order_id
    payShow.value = true;
    Toast.clear()
  }).catch(() => { 
    Toast.clear()
  })
};

// 关闭支付组件
const closePay = () => { 
  payShow.value = false
}

const onLoad = () => {
  getMarketGoodsDetail();
};

onLoad();
</script>

<style lang="scss" scoped>
.detail {
  width: 100%;
  height: 100%;
  background-color: #fafafa;
}

.goods {
  background-color: #fff;
  padding-bottom: 0.5769rem;
  padding-top: 1.2rem;
}

.border {
  margin-left: 0.55rem;
  box-sizing: border-box;
  position: relative;
  background: black;
  background-image: -webkit-linear-gradient(top right, #5d5d5b, #383838);
  background-image: linear-gradient(top right, #5d5d5b, #383838);
  padding: 0.2rem;
  padding-top: 0.12rem;
  padding-bottom: 0.14rem;
  width: 6.3462rem;
  box-shadow: darkgrey 0.0962rem 0.0962rem 0.2885rem 0.0481rem; //边框阴影
}

.frame {
  box-shadow: inset -0.0192rem 0.0192rem 0.1154rem 0.0192rem rgba(0, 0, 0, 0.24);
  background: white;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0.3462rem;
  box-sizing: border-box;
}

.image {
  box-shadow: inset 0 0 0.0192rem 0 rgba(0, 0, 0, 0.2);
  height: 100%;
  width: 100%;

  img {
    width: 100%;
    height: auto;
  }
}
.text {
  margin-top: 0.35rem;
  padding: 0.5769rem;
  padding-top: 0.3846rem;
  padding-bottom: 0.3846rem;
  background-color: #fff;

  .issuuser {
    display: flex;
    align-items: center;
    img {
      width: 0.3269rem;
      height: 0.3269rem;
      margin-right: 0.0962rem;
      margin-left: 0.0962rem;
      margin-bottom: -0.0577rem;
    }
  }

  .classlist {
    display: flex;
    margin-bottom: 0.2rem;
    .name {
      font-size: 0.3846rem;
    }
    .class {
      display: flex;
      align-items: center;
      height: 0.38rem;
      justify-content: center;
      background: black;
      border-radius: 0.0962rem;
      padding: 0 0.05rem;
      font-size: 0.0385rem;
      color: white;
      margin-left: 0.1923rem;
      margin-top: 0.0769rem;
    }
  }

  .price {
    margin-bottom: 0.25rem;
  }
}

.auth_mes {
  background: #fff;
  display: flex;
  flex-direction: column;
  margin-top: 0.1923rem;
  padding: 0.3846rem 0.5769rem;
  img {
    width: 0.3846rem;
    height: 0.3846rem;
    margin-bottom: -0.0769rem;
  }

  .titl {
    font-weight: bold;
    font-size: 0.2692rem;
    margin-bottom: 0.1923rem;
  }

  .addrass {
    margin-bottom: 0.1923rem;
  }

  .ad_text {
    margin-left: 2.8846rem;
  }

  .ch_text {
    margin-left: 2.8846rem;
  }

  .public {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.goodsmes {
  padding-bottom: 1.5rem;
  .title {
    display: flex;
    align-items: center;
    font-weight: bold;
    margin-bottom: 0.1923rem;
    span {
      font-size: 0.2885rem;
    }
    img {
      width: 0.3846rem;
      height: 0.3846rem;
      margin-right: 0.1923rem;
    }
  }

  text {
    line-height: 0.4808rem;
    font-size: 0.1923rem;
    text-indent: 2em;
    letter-spacing: 0.0385rem;
  }
}

.content {
  padding: 0.5769rem;
  padding-top: 0;
  .price {
    padding-top: 0.1923rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    .title {
      color: #6e6e6e;
      font-size: 0.2885rem;
    }
    .price_num {
      font-weight: bold;
      font-size: 0.5769rem;
      padding: 0.1923rem;
    }
    .buy_num {
      padding: 0.1923rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 3.4615rem;
      .buy_text {
        font-size: 0.3077rem;
        font-weight: bold;
      }
    }
  }
  .button_group {
    padding-top: 0.3846rem;
    display: flex;
    justify-content: space-around;
    .van-button {
      border-radius: 0.1923rem;
      width: 40%;
      background-color: black;
      color: white;
      border: black;
    }
    .van-button--default {
      background: white;
      color: black;
      border: solid 0.0192rem black;
    }
  }
}

.blindBoxList {
  background-color: #fff;
  padding: 0.3846rem;
  padding-right: 0.5769rem;
  margin-top: 0.1923rem;
  .blindItem {
    padding: 0.1923rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .name {
      font-weight: bold;
    }
  }
  .right {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 40%;
  }
}
.buy {
  position: fixed;
  width: 100%;
  bottom: 0rem;
}
</style>